<template>
  <div>
    <slot :name="`form-${props.component.dataIndex}`" v-bind="props.component">
      <a-divider
        v-if="typeof props.component.display == 'undefined' || props.component.display === true"
        :class="[props.component.customClass]"
        :direction="props.component.direction"
        :margin="props.component.margin"
        :orientation="props.component.orientation"
        :size="props.component.size"
        :type="props.component.type"
      >
        {{ props.component?.title ?? "" }}
      </a-divider>
    </slot>
  </div>
</template>

<script setup>
import { runEvent } from "@/components/MaForm/types/event";

const props = defineProps({
  component: Object
});

const formModel = inject("formModel");
const getColumnService = inject("getColumnService");
const columns = inject("columns");
const rv = async (ev, value = undefined) =>
  await runEvent(
    props.component,
    ev,
    {
      formModel,
      getColumnService,
      columns
    },
    value
  );

rv("onCreated");
onMounted(() => rv("onMounted"));
</script>
